<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">

    <!-- 引入link的样式文件 -->
    <link rel="stylesheet" href="./css/linkwm.css">
    <!-- <script src="./lib/layui/layui.js" charset="utf-8"></script> -->
    <script src="./node_modules/layui/dist/layui.js"></script>

    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row link_nav">
            <ul class="link_list_add">
                <li class="link_list "> <a class="orange" href="javascript:;" id="link_list">链接列表</a></li>
                <li class="add_link"> <a href="javascript:;" id="add_link">添加链接</a></li>
            </ul>
        </div>
        <!-- 第二行表单页 -->
        <div class="layui-card" id="main_link">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="chooseThis">文字链接</li>
                    <li>图片链接</li>
                </ul>
                <div class="layui-tab-content">
                    <!-- 第一页 -->
                    <div class="layui-tab-item layui-show wordLink">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="50">
                                <col width="200">
                                <col width="200">
                                <col width="200">
                                <col width="200">
                                <col width="200">

                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>ID</th>
                                    <th>链接标题</th>
                                    <th>链接描述</th>
                                    <th>链接地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 此处模板引擎部分 -->
                            </tbody>
                        </table>
                        <!-- 分页 -->
                        <div id="page_friendLinks"></div>
                    </div>

                    <!-- 第二页图片链接 -->
                    <div class="layui-tab-item imgLink">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="50">
                                <col width="200">
                                <col width="200">
                                <col width="200">
                                <col width="200">
                                <col width="200">

                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>ID</th>
                                    <th>链接图片</th>
                                    <th>链接描述</th>
                                    <th>链接地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 第二页模板引擎内容 -->
                            </tbody>
                        </table>
                        <!-- 分页 -->
                        <div id="page_wordLinks"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加链接部分 -->
        <div id="upload_link" style="display: none;">
            <!-- 添加链接 -->
            <form class="layui-form" action="" id="add_link_form">

                <div class="layui-form-item">
                    <label class="layui-form-label">链接类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="demo" id="choose_type">
                            <option value="">请选择</option>
                            <option value="1">文字链接</option>
                            <option value="2">图片链接</option>
                        </select>
                    </div>
                </div>
                <!-- 链接标题，仅文字有 -->
                <div class="layui-form-item" id="onlyword_title" style="display: none;">
                    <label class="layui-form-label">链接标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="des" required lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 链接图片，仅图片 -->
                <div class="layui-form-item" id="onlyImg_photo" style="display: none;">
                    <label class="layui-form-label">链接图片</label>
                    <button type="button" class="layui-btn layui-btn-danger uploadBtnAdd">点击上传</button>
                    <!-- 文件上传的隐藏域 -->
                    <input type="text" name="img" style="display: none;" id="hidAddIput">
                    <input type="file" class="hidAddIput" style="display: none;">
                    <p class="tips">只能上传jpg/png文件，且不超过500kb</p>
                </div>
                <div class="layui-form-item">
                    <div class="photoArea" style="display: none;" id="hid_photoArea">
                        <div class="photoAdd">
                            <!-- 图片地址 -->
                            <img src="" alt="">
                        </div>
                        <div>
                            <i class="layui-icon layui-icon-close"></i>
                        </div>
                    </div>
                </div>
                <!-- 创建&取消按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-danger" lay-submit>立即创建</button>
                        <button class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>

            </form>
        </div>
        <!-- 文字链接模板引擎 -->
        <script type="text/html" id="tpl_table_word">
            {{each data}}
            <tr>
                <td>{{++$index}}</td>
                <td>{{$value.id}}</td>
                <td>{{$value.title}}</td>
                <td>{{$value.des}}</td>
                <td>{{$value.url}}</td>
                <td>
                    <button type="button" class="layui-icon layui-icon-edit linkEdit" data-id="{{$value.id}}"></button>
                    <button type="button" class=" layui-icon layui-icon-delete linkDelete" data-id="{{$value.id}}"></button>
                </td>
            </tr>
            {{/each}}
        </script>
        <!-- 点击编辑按钮的弹出层 -->
        <script type="text/html" id="edit_links">
            <form class="layui-form" id="form-edit" lay-filter="form-edit">
                <div class="layui-form-item">
                    <label class="layui-form-label">链接标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="des" required lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item sure_delete">
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-primary" id="cancel_btn">取消</a>
                        <button class="layui-btn layui-btn-danger" lay-submit id="sure">确认</button>
                    </div>
                </div>
            </form>
        </script>

        <!-- 图片链接模板引擎 -->
        <script type="text/html" id="tpl_table_img">
            {{each data}}
            <tr>
                <td>{{++$index}}</td>
                <td>{{$value.id}}</td>
                <!-- 图片 -->
                <td><img src="http://122.51.249.55:8083{{$value.src}}"></td>
                <td>{{$value.des}}</td>
                <td>{{$value.url}}</td>
                <td>
                    <button type="button" class="layui-icon layui-icon-edit linkEditAmg" data-id="{{$value.id}}"></button>
                    <button type="button" class="layui-icon layui-icon-delete linkDeleteAmg" data-id="{{$value.id}}"></button>
                </td>
            </tr>
            {{/each}}
        </script>

        <!-- 图片链接的编辑按钮的弹出层 -->
        <script type="text/html" id="img_links">
            <form class="layui-form" id="form-img" lay-filter="form-img">
                <div class="layui-form-item">
                    <label class="layui-form-label">链接描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="des" required lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接图片</label>
                    <button type="button" class="layui-btn layui-btn-danger uploadBtn">点击上传</button>
                    <!-- 文件上传的隐藏域 -->
                    <input type="text" name="img" style="display: none;" id="hidUploadIput">
                    <input type="file" class="hidbtnUpload" style="display: none;">
                    <p class="tips">只能上传jpg/png文件，且不超过500kb</p>
                </div>

                <div class="layui-form-item">
                    <div class="photoArea">
                        <div class="photo">
                            <!-- 图片地址 -->
                            <img src="" alt="">
                        </div>
                        <div>
                            <i class="layui-icon layui-icon-close"></i>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item sure_delete">
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-primary" id="cancel_btn_img">取消</a>
                        <button class="layui-btn layui-btn-danger" lay-submit>确定</button>
                    </div>
                </div>
            </form>
        </script>

        <!-- 引入jq文件 -->
        <script src=" ./js/jquery.min.js"></script>
        <!-- 导入模板引擎 -->
        <script src="./node_modules/art-template/lib/template-web.js"></script>
        <script src="./js/linkwumin.js"></script>

</body>
<script>
</script>

</html>